<template>
  <div>
    <h4>HelloA</h4>
    <p>store 中的 a: {{ $store.state.a }}</p>
    <button @click="$store.state.a++">直接修改 a</button>

    <p>store 中的 a: {{ a }}</p>
    <p>store 中的 b: {{ b }}</p>
    <button @click="b++">计算属性修改 b</button>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  // this.$store.state.xxx (不推荐直接在模板中使用)
  // 使用计算属性            （推荐）
  //    1. 仓库中的数据不能直接修改，需要走它的流程。使用计算属性的时候就能避免你直接去修改它的数据
  //    2. 可以换名字在组件中使用
  // 使用计算属性，使用 Vuex.mapState 辅助函数, 它会返回一个对象
  //    1. 它接收一个数组的参数，数组的每一项就是仓库中state的内容
  //    2. 它接收一个对象的参数，这时可以对数据换个名字
  //    mapState(['a', 'b'])
  // {
  //   a() {
  //     return this.$store.state.a
  //   },
  //   b() {
  //     return this.$store.state.b
  //   }
  // }
  computed: {
    ...mapState(["a", "b"]),
    msg() {
      return "12312";
    },
  },

  // computed: {
  //   b() {
  //     return this.$store.state.b;
  //   },
  // },
};
</script>
